<template>
	<view class="content">
		<view class="addgroup">
			<div class="item" v-for="(item,index) in grounp" :key="index">
				<image :src="item.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'" alt="" mode="aspectFill" />
				<text>{{item.realName}}</text>
			</div>
			<div class="add" @click="showdialogFun('add')">+</div>
			<div class="delete" @click="[showdialog = true]">-</div>
		</view>
		<view class="submit" @click="addgroup">确定</view>
		<view class="dialog" v-if="showdialog">
			<div class="dialog-header">
				<image src="../../static/img/close.png" mode="widthFix" @click="showdialog = false"></image>
				选择联系人
			</div>
			<div class="search"><input type="text" v-model="search" placeholder="搜索" @input="searchAxios"></div>
			<scroll-view class="item-warp" scroll-y="true" lower-threshold="50" @scrolltolower="scrolltolower" scroll-left="120">
					<checkbox-group @change="checkboxChange">
						<div class="item" v-for="(item,index) in mailList" :key="index">
							<checkbox :value="item.codeId" :checked="item.checked" :disabled="item.codeId == mId" />
							<image mode="aspectFill" :src="item.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'" />
							<div class="info">
								<div class="hd"><text>{{item.realName}}</text><text>{{item.appellations}}</text></div>
								<div class="phone">{{item.phone}}</div>
							</div>
						</div>
					</checkbox-group>
			</scroll-view>
			<div class="dialog-btn" @click="confim">
				<view class="l-auto">
					<view v-for="(item,index) in isCheck" :key="index">
						<view v-if="index > 0">
							<image :src="item.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'" mode="aspectFill" alt="">
						</view>
					</view>
				</view>
				<view class="btn">完成<span v-if="isCheck.length > 1">({{isCheck.length-1}})</span></view>
			</div>
		</view>
	</view>
</template>

<script>
	import {getUrlParam} from '@/static/js/filter.js'
	const RongIMLib = require('@/static/js/IMSDK/RongIMLib-3.0.7-dev');
	export default {
		data(){
			return{
				grounp:[],
				showdialog:false,
				mailList:[],
				isCheck:[],
				search:'',
				pageIndex:1,
				isNull:false
			}
		},
		onShow(){
			const _this = this;
			const mName = decodeURI(getUrlParam('mName'))
			const mPic = decodeURI(getUrlParam('mPic'))
			const tName = decodeURI(getUrlParam('tName'))
			const tPic = decodeURI(getUrlParam('tPic'))
			const tId = decodeURI(getUrlParam('tId'))
			const mId = decodeURI(getUrlParam('mId'))
			this.mId = mId
			this.grounp.push({realName:mName,headPicture:mPic,codeId:mId},{realName:tName,headPicture:tPic,codeId:tId})
		},
		methods:{
			// 触底
			scrolltolower(){
				if(!this.isNull){
					this.pageIndex ++
					setTimeout(()=>{
						this.$api.getMailList({realName:this.search,pageIndex:this.pageIndex,pageSize:10,healthRank:'',phone:''}).then((res)=>{
							const grounpCode = this.grounp.map((b)=>{return b.codeId})
							const data  = res.data.result && res.data.result.list.map((a)=>{
								a.checked = false
								if(grounpCode.indexOf(a.codeId) > -1){
									a.checked = true
								}
								return a
							})
							if(res.data.result && res.data.result.list.length <= 0){
								this.isNull = true
								return;
							}
							this.mailList = this.mailList.concat(data)
						})
					},500)
				}
			},
			showdialogFun(type){
				this.showdialog = true
				this.pageIndex = 1
				this.isNull = false
				this.$api.getMailList({pageIndex:1,pageSize:10,healthRank:'',phone:'',realName:''}).then((res)=>{
					const grounpCode = this.grounp.map((b)=>{return b.codeId})
					this.mailList = res.data.result && res.data.result.list.map((a)=>{
						a.checked = false
						if(grounpCode.indexOf(a.codeId) > -1){
							a.checked = true
						}
						return a
					})
				})
			},
			searchAxios(){
				this.mailList = []
				this.pageIndex = 1
				this.isNull = false
				setTimeout(()=>{
					this.$api.getMailList({realName:this.search,pageIndex:1,pageSize:10,healthRank:'',phone:''}).then((res)=>{
						const grounpCode = this.grounp.map((b)=>{return b.codeId})
						this.mailList = res.data.result && res.data.result.list.map((a)=>{
							a.checked = false
							if(grounpCode.indexOf(a.codeId) > -1){
								a.checked = true
							}
							return a
						})
					})
				},500)
			},
			checkboxChange(e){
				const mName = decodeURI(getUrlParam('mName'))
				const mPic = decodeURI(getUrlParam('mPic'))
				const mId = decodeURI(getUrlParam('mId'))
				const isCheck = [{realName:mName,headPicture:mPic,codeId:mId}]
				e.detail.value.map((a)=>{
					this.mailList.map((b)=>{
						if(b.codeId == a){
							if(b.codeId == this.mId){
								return
							}
							isCheck.push(b)
						}
					})
				})
				console.log(isCheck)
				this.isCheck = isCheck
			},
			addgroup(){
				const _this = this;
				const groupName = this.grounp && this.grounp.map((a)=>{return a.realName}).join(',')
				const healthList = []
				const userList = []
				this.grounp.map((res)=>{
					if(res.codeId.indexOf('hlh') > -1){
						healthList.push(res.codeId.substr(4))
					}else{
						userList.push(res.codeId.substr(5))
					}
				})
				this.$api.createGroup({groupName:groupName,healthList:healthList,userList:userList}).then((res)=>{
					if(res.data.returnCode == 200){
						var conversation = _this.$im.Conversation.get({
						  targetId: res.data.result.groupId,
						  type: RongIMLib.CONVERSATION_TYPE.GROUP
						});
						const obj = {
							content: decodeURI(getUrlParam('mName')) +'创建了一个新的群组',// 文本内容
							groupstatus:'groupAdd',
							type:'groupMsg',
							contentType:'text',
							user:{
								id:decodeURI(getUrlParam('mId')),
								portraitUri:decodeURI(getUrlParam('mPic')),
								name:decodeURI(getUrlParam('mName')),
							},
							groupinfo:{
								id:res.data.result.groupId,
								name: groupName,
								portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/29ac15f982ef4d5780c7452ae3ca5610.png',
							}
						}
						conversation.send({
						  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
						  content: obj
						}).then(function(message){
							uni.reLaunch({
								url:'/pages/index/consult'
							})
						});
					}
				})
			},
			confim(){
				const isCheck = this.isCheck
				const tName = decodeURI(getUrlParam('tName'))
				const tPic = decodeURI(getUrlParam('tPic'))
				const tId = decodeURI(getUrlParam('tId'))
				isCheck.splice(1, 0, {realName:tName,headPicture:tPic,codeId:tId});
				this.grounp = isCheck
				this.showdialog = false;
			},
		}
	}
</script>

<style lang="scss">
	.addgroup{
		display: flex;
		padding: 20upx;
		flex-wrap: wrap;
		.item{
			margin: 20upx;
			text-align: center;
			image{width: 100upx;height: 100upx;display: block;}
			text{font-size: 26upx;margin-top: 16upx;display: block;}
			position: relative;
			.del-content{
				position: absolute;
				width: 100upx;
				height: 100upx;
				left: 0;
				top: 0;
				z-index: 100;
				background: rgba(0,0,0,.7);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.del-icon{
				width: 40upx;
				height: 40upx;
			}
		}
		.add,.delete{
			width: 100upx;
			height: 100upx;
			margin: 20upx;
			box-sizing: border-box;
			border: 1upx solid #ccc;
			font-size: 60upx;
			text-align: center;
			line-height: 85upx;
		}
	}
	.submit{
		width: 50vw;
		margin: 100upx auto 0;
		line-height: 80upx;
		background: #000;
		border-radius: 80upx;
		color: #fff;
		text-align: center;
	}
	.dialog{
		width: 100vw;
		height: 100%;
		background: #F1F1F1;
		position: fixed;
		left: 0;
		bottom: 0;
		overflow: auto;
		border-top: 1upx solid #ccc;
		z-index: 999;
		.dialog-header{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			background: #f5f5f5;
			font-size: 26upx;
			position: fixed;
			z-index: 1000;
			image{
				position: absolute;
				width: 48upx;
				left: 20upx;
				top: 20upx;
			}
		}
		.search{
			display: flex;
			padding: 2vw;
			margin-top: 88upx;
			position: fixed;
			width: 96vw;
			background: #fff;
			z-index: 100;
			border-bottom:1upx solid #f1f1f1;
			input{
				box-sizing: border-box;
				flex:1;
				height: 60upx;
				border-radius: 10upx;
				padding-left: 2vw;
			}
			button{
				height: 60upx;
				margin-left: 20upx;
				line-height: 60upx;
				font-size: 26upx;
			}
		}
		.scroll-view_H{
			// height: 78vh;
			// padding-top: 176upx;
			// max-height: 78vh;
		}
		.item-warp{
			padding-top: 176upx;
			max-height: 78vh;
			overflow: auto;
			background: #fff;
			.item{
				display: flex;
				padding: 2vw;
				align-items: center;
				image{
					width: 78upx;
					height: 78upx;
					border-radius:8upx;
				}
				.info{
					flex:1;
					margin-left: 2vw;
					padding:20upx 0;
					border-bottom:1upx solid #f1f1f1;
					.hd{
						display: flex;
						font-size: 30upx;
						text{
							color: #333;
							&:nth-of-type(1){
								margin-right: 20upx;
							}
						}
					}
					.phone{
						font-size: 28upx;
						color: #666666;
						margin-top: 10upx;
					}
				}
			}
		}
		.dialog-btn{
			display: flex;
			align-items: center;
			margin-top: 28upx;
			.l-auto{
				flex:1;
				display: flex;
				margin-right: 20upx;
				overflow: auto;
				image{
					width: 70upx;
					height: 70upx;
					margin: 0 10upx;
					border-radius:10upx;
					display: inline-block;
				}
			}
			.btn{
				width: 124upx;
				height: 58upx;
				line-height: 58upx;
				border-radius: 8upx;
				background: #38CB97;
				text-align: center;
				color: #fff;
				float: right;
				margin-right: 30upx;
			}
			
		}
	}
	/deep/ .uni-checkbox-input{
		border-radius: 32upx;
		width: 32upx;
		height: 32upx;
		margin-left: 1vw;
		margin-right: 3vw;
	}
	/deep/ .uni-checkbox-input-checked{
		background: #38cb97;
		border-color: #38cb97;
		&::before{
			color: #fff;
			font-size: 32upx !important;
		}
		&::hover{
			border-color: #38cb97;
		}
	}
</style>
